關於dataset(data-*)

2023 iThome 鐵人賽

DAY 15

自我挑戰組

前端菜雞_賀周歲成長日誌系列第 15 篇

15th鐵人賽 javascript

晚睡公主

2023-09-29 09:25:51

351 瀏覽

分享至

理解&說明

data-* 是一種 html 的自訂資料屬性
dataset 屬性只能讀取(JS讀取在html中賦予的屬性)，不能寫入(用寫JS給予值)
增加一個dataset屬性：在 html 標籤中寫 data-* (例如：data-class、data-time、data-required)
- -* 這名字可以包含小寫字母、數字、破折號(-)、句點(.)、冒號(:)、下底線(_)
- 跟駝峰是寫法轉換的方法：dataClassNo ⇒ data-class-no
讀取dataset值
- 在JavaScript中透過(例如) element.dataset.class、element.dataset[class] 來取到值
設定dataset值
- 設置的屬性值都會被轉成字串
- 在JavaScript中利用(例如) element.dataset.class === ‘317’ 來設定已經有的屬性的值
- 在JavaScript中利用(例如) delete element.dataset.class 來刪除屬性

範例

增加、讀取 dataset 屬性
- 第一個console：先來看看直接取出dataset會長怎麼樣
- 第二個console：想要取到 data-class-no，在JS中要寫成駝峰式寫法，也就是 classNo 才能讀得到。

<html>
  <body>
		<div id="classNumber" data-class-no="317" data-teacher="Sue">
		    dataset 測試用
		</div>

    <script>
				let datasetObj= document.querySelector('#classNumber').dataset
				let classNumber = document.querySelector('#classNumber').dataset.classNo
        console.log(datasetObj)
        console.log(classNumber)
    </script>
  </body>
</html>

// 317
// {classNo: '317',teacher: 'Sue'}

設定 dataset 屬性(修改)

要用 document.querySelector('#classNumber').dataset.teacher 這樣的方式，去修改 teacher 的值。

<html>
  <body>
		<div id="classNumber" data-class-no="317" data-teacher="Sue">
		    dataset 測試用
		</div>

    <script>
				let datasetObj= document.querySelector('#classNumber').dataset
        let teacher= document.querySelector('#classNumber').dataset.teacher
        teacher = 'Lee'
        console.log(datasetObj)
        console.log(teacher)
        document.querySelector('#classNumber').dataset.teacher = 'Lee'
        console.log(datasetObj)
        console.log(teacher)
    </script>
  </body>
</html>

// {classNo: '317',teacher: 'Sue'}
// Lee
// {classNo: '317',teacher: 'Lee'}
// Lee

設定 dataset 屬性(刪除)

一樣要用 document.querySelector('#classNumber').dataset.teacher 這樣的方式，取到 teacher 的值後再刪除。

<html>
  <body>
		<div id="classNumber" data-class-no="317" data-teacher="Sue">
		    dataset 測試用
		</div>

    <script>
				let datasetObj= document.querySelector('#classNumber').dataset
        let teacher= document.querySelector('#classNumber').dataset.teacher
				delete teacher
        console.log(datasetObj)
        delete document.querySelector('#classNumber').dataset.teacher
        console.log(datasetObj)
    </script>
  </body>
</html>

// {classNo: '317',teacher: 'Sue'}
// {classNo: '317'}